<template>
	<view>
		<view class="list">
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					项目名称
				</view>
				<view class="acea-row row-middle row-right item-r">
					<!-- <input class="input-r" type="text" placeholder="请输入项目名称" v-model="dataForm.name"> -->
					<chooseComp :dataform="dataForm" placeholder="请选择项目" @change="(key,val)=>dataForm[key]=val" />
				</view>
			</view>
			<!-- 			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					项目状态
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入项目名称" v-model="projectStatus">
				</view>
			</view> -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					项目地址
				</view>
				<view class="acea-row row-middle row-right item-r address">
					<input type="text" placeholder="请输入/选择地址" v-model="dataForm.address"
						placeholder-class="placeholder-class">
					<image src="../static/images/location.png" mode="" @click="chooseLocation"></image>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					开发商名称
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入开发商名称" v-model="dataForm.developerName"
						placeholder-class="placeholder-class">
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					物管公司名称
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入" v-model="dataForm.propertyCompany"
						placeholder-class="placeholder-class">
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					规划住宅套数
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="示例:4000" v-model="dataForm.residentialUnits"
						placeholder-class="placeholder-class">
					<text>套</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					总建筑面积
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="示例:3000" v-model="dataForm.floorage"
						placeholder-class="placeholder-class">
					<text>m²</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					总楼层数
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="示例:30" v-model="dataForm.totalFloors"
						placeholder-class="placeholder-class">
					<text>层</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b">
				<view class="label">商业建筑类型</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<!-- <view class="data-r">街区步行街</view> -->
					<view :class="dataForm.buildingType>0?'':'no-data-r'" @click="openPick('buildingType')">
						{{dataForm.buildingType?(chooseName(buildingTypeDic,dataForm.buildingType)):'请选择'}}
					</view>
					<!-- 街区步行街 -->
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					商业面积
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="示例:3000" v-model="dataForm.commercialArea"
						placeholder-class="placeholder-class">
					<text>m²</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					商业楼层数
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="示例:30" v-model="dataForm.commercialFloor"
						placeholder-class="placeholder-class">
					<text>层</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					住宅均价
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="示例:10200" v-model="dataForm.residentialPrice"
						placeholder-class="placeholder-class">
					<text>元/m²</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					商业均价
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="示例:10200" v-model="dataForm.commercialPrice"
						placeholder-class="placeholder-class">
					<text>元/m²</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b">
				<view class="label">开工/交付时间</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<picker mode="date" :value="dataForm.commencementDate" name='commencementDate' :start="startDate"
						:end="endDate" @change="opentimeChange">
						<view class="uni-input" :class="dataForm.commencementDate ? '' : 'no-data-r'">
							{{dataForm.commencementDate ? dataForm.commencementDate : '请选择'}}
						</view>
					</picker>
					<!-- <view class="no-data-r">请选择 commencementDate</view> -->
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b">
				<view class="label">停车位</view>
				<!-- <view class="acea-row row-middle row-right item-r sanjiao-right"> -->
				<!-- <view class="data-r">大型停车场 parkingSpace</view> -->
				<!-- <view :class="dataForm.parkingSpace>0?'':'no-data-r'" @click="openPick('parkingSpace')">
						{{dataForm.parkingSpace?(chooseName(parkingSpaceDic,dataForm.parkingSpace)):'请选择'}}
					</view>
				</view> -->
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="number" placeholder="示例:100" v-model="dataForm.parkingSpace"
						placeholder-class="placeholder-class">
					<text>位</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					管理费用
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="示例:1.5元" v-model="dataForm.propertyCost"
						placeholder-class="placeholder-class">
				</view>
			</view>
			<!-- 项目介绍 -->
			<view class="module">
				<view class="module-title">
					项目介绍
				</view>
				<view class="textacea-box">
					<textarea placeholder="请输入项目介绍" v-model="dataForm.introduction" maxlength="-1"
						placeholder-class="placeholder-class"></textarea>
					<!-- <view class="num-text">
						{{introduction.length}}/{{maxLength}}
					</view> -->
				</view>
			</view>
			<!-- 项目照片/视频 -->
			<view class="module">
				<view class="acea-row row-middle row-between">
					<view class="module-title">
						上传照片/视频
					</view>
					<view class="example-text">
						图片示例
					</view>
				</view>
				<view class="example-text-l">
					请至少添加一张正面照，图片越多审核越快
				</view>
				<view class="acea-row pictrue-list">
					<view class="pictrue" @click="selectPicture(0)">
						<view class="pictrue" v-if="dataForm.photoVideo[0]">
							<image :src="dataForm.photoVideo[0]" mode=""></image>
						</view>
						<view class="acea-row row-column row-center-wrapper pictrue" v-else>
							<view class="pictrue" v-if="dataForm.photoVideo[0]">
								<image :src="dataForm.photoVideo[0]" mode=""></image>
							</view>
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
							<view>门头照</view>
						</view>

					</view>
					<view class="pictrue" @click="selectPicture(1)">
						<view class="pictrue" v-if="dataForm.photoVideo[1]">
							<image :src="dataForm.photoVideo[1]" mode=""></image>
						</view>
						<view class="acea-row row-column row-center-wrapper pictrue" v-else>
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
							<view>正面照</view>
						</view>
					</view>
					<view class="pictrue" @click="selectPicture(2)">
						<view class="pictrue" v-if="dataForm.photoVideo[2]">
							<image :src="dataForm.photoVideo[2]" mode=""></image>
						</view>
						<view class="acea-row row-column row-center-wrapper pictrue" v-else>
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
							<view>里面照</view>
						</view>
					</view>
					<template v-for="(item,index) in dataForm.photoVideo">
						<view class="pictrue" @click="selectPicture(index)" :key="index"
							v-if="index>=3&&dataForm.photoVideo[index]">
							<view class="pictrue">
								<image :src="dataForm.photoVideo[index]" mode=""></image>
							</view>
						</view>
					</template>

				</view>
				<view class="acea-row row-center row-center add-more-picture"
					@click="selectPicture(dataForm.photoVideo.length>3?dataForm.photoVideo.length+1:4)">
					<view>添加更多照片</view>
					<view class="jiantou-b"></view>
				</view>
			</view>
			<!-- 上传文件 -->
			<view class="module border-b">
				<view class="module-title">
					上传项目文件
				</view>
				<view class="acea-row row-bottom upload-top">
					<view class="upload-btn" @click="selectFiles">上传文件</view>
					<view class="upload-mask">支持批量上传，上传格式为word、pdf、txt文件</view>
				</view>
				<view class="file-table">
					<view class="acea-row row-middle row-between table-h">
						<view class="table-l">文件名</view>
						<view class="table-r">操作</view>
					</view>
					<view class="table-b">
						<template v-if="uploadFilesData.length>0">
							<view class="acea-row row-middle row-between table-item"
								v-for="(item,index) in uploadFilesData" :key="index">
								<view class="table-l">{{item.fileName}}</view>
								<view class="table-r" @click="delUploadFile(index)">删除</view>
							</view>
						</template>
						<template v-else>
							<view class="acea-row row-middle row-center" style="padding: 100rpx 0;">
								<text style="color: #ccc;">暂无文件</text>
							</view>

						</template>

					</view>
				</view>
				<!-- 			<view class="acea-row row-right row-middle control-btns">
					<view class="cancel">取消</view>
					<view class="start-btn start-btn-on">开始上传</view>

				</view> -->
			</view>
			<!-- 联系人 -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					联系人
				</view>
				<view class="add-icon" @click="addContact">
					<image src="../static/images/add_icon.png" mode=""></image>
				</view>
			</view>
			<view :class="dataForm.contacts.length>0?'item border-b':'item'">
				<!-- 				<view class="contact-list">
					<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in dataForm.contacts"
						:key="index">
						<view class="acea-row row-middle row-between contact-r">
							<view class="add-icon" @click="deleteContact(index)">
								<image src="../static/images/sub_icon.png" mode=""></image>
							</view>
							<view class="name">{{item.contactName}}</view>
							<view class="gray-text" v-if='item.contactType == 1'>
								房东
							</view>
							<view class="gray-text" v-if='item.contactType == 2'>
								老板
							</view>
							<view class="gray-text" v-if='item.contactType == 3'>
								雇员
							</view>
							<view class="gray-text"
								@click="toPage('/pages/releases/addShopContact/addShopContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
								{{item.contactPhone}}
							</view>
						</view>
						<view class="acea-row row-middle check-box" v-if="item.open == 0">
							<image src="../static/images/checkbox_no.png" mode="" @click="openChange(item,1)">
							</image>
							<text>公开</text>
						</view>
						<view class="acea-row row-middle check-box" v-if="item.open == 1">
							<image src="../static/images/checkbox_on.png" mode="" @click="openChange(item,0)">
							</image>
							<text>公开</text>
						</view>
					</view>
				</view>
			 -->
				<chooseContact :list="dataForm.contacts" :dataform="dataForm" @add="d=>dataForm.contacts.push(d)"
					@del="toDel" />
			</view>

			<view class="uni-p-b-98"></view>
		</view>
		<view class="submit-btn" @click="addProjectMeth">完成</view>
		<view class="uni-p-b-98"></view>

		<u-picker :show="pickShow" :columns="pickData" :keyName="pickKey" @cancel="pickShow = false"
			@confirm="pickChoose"></u-picker>
	</view>
</template>

<script>
	import {
		addProject,
		editProject,
		getProjectDetail,
		delProject
	} from '@/api/centerModule/index.js'
	import chooseContact from '../components/chooseContact.vue'
	import chooseComp from '../components/chooseComp.vue'
	import {
		dictionary
	} from '@/api/subletOfShop.js'
	export default {
		components: {
			chooseContact,
			chooseComp
		},
		data() {
			return {
				dataForm: {
					name: '', //项目名称
					// projectStatus: '', //项目状态
					address: '', //项目地址
					developerName: '', //开发商名称
					propertyCompany: '', //物业管理公司
					residentialUnits: '', //规划住宅套数
					floorage: '', //总建筑面积
					totalFloors: '', //总楼层数
					commercialArea: '', //商业面积
					commercialFloor: '', //商业层数
					residentialPrice: '', //住宅均价
					commercialPrice: '', //商业均价
					commencementDate: '', //开工时间
					propertyCost: '', //管理费用
					introduction: '', //项目介绍
					parkingSpace: '', //停车位
					photoVideo: [], //照片
					contacts: [], //联系人
				},
				uploadFilesData: [],
				pickShow: false,
				pickData: [],
				pickDefaultIndex: {},
				pickKey: 'name',
				pickFiled: '',
				pickChooseD: {},
				buildingTypeDic: [], //建筑类型字典
				parkingSpaceDic: [], //停车位字典
				requireFiledRule: [{
						filed: 'projectId',
						tip: '请输入项目名称'
					}, {
						filed: 'address',
						tip: '请输入项目地址'
					}, {
						filed: 'developerName',
						tip: '请输入开放商名称'
					},
					{
						filed: 'contacts',
						tip: '请选择联系人'
					}
				],
				isDetail: false
			}
		},
		created() {
			this.getHouseTypeDic()
		},
		mounted() {
			let that = this;
			// uni.$on('contact', function(data) {
			// 	data.identity = data.type
			// 	data.contactName = data.username
			// 	data.contactPhone = data.phone			
			// 	data.contactType =	data.type
			// 	that.dataForm.contacts.push(data)
			// 	console.log(that.dataForm.contacts)	
			// })
			// uni.$on('upContact', function(data) {
			// 	that.dataForm.contacts.splice(data.index, 1, data.info)
			// })
			// uni.$on('initContact', function(data) {
			// 	if (that.dataForm.contacts.length < 1) {
			// 		console.log('initPhone',data)
			// 		that.dataForm.contacts.push(data)
			// 	}
			// })
			getApp().globalData.initContact()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			opentimeChange(e) {
				console.log(e)
				this.dataForm.commencementDate = e.detail.value;
			},
			toDel(index, info, callback) {
				if (info) {
					dataForm.contacts.splice(index, 1, info);
				} else {
					dataForm.contacts.splice(index, 1);
				}
				callback && callback();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			selectPicture(ind) {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 0,
				}, function(res) {
					that.dataForm.photoVideo[ind] = res.data.url;
					that.dataForm.photoVideo = JSON.parse(JSON.stringify(that.dataForm.photoVideo))
				});
			},
			//文件上传
			selectFiles() {
				let that = this;
				that.$util.uploadFiles({
					extension: ['xlsx', '.xlsx', '.doc', '.docx', '.txt', '.pdf'],
					name: 'multipart',
					model: "user",
					count: 10,
					pid: 0
				}, res => {
					res.forEach(file => {
						that.uploadFilesData.push({
							projectFile: file.url,
							fileName: file.name,
							ext: file.extName
						})
					})
					console.log("uploadFilesData", that.uploadFilesData)
				}, err => {
					console.log("uploadFielsErr", err)
				})
			},
			delUploadFile(index) {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "是否要删除",
					success(res) {
						if (res.confirm) {
							that.uploadFilesData.splice(index, 1)
						}
					}
				})

			},
			//选择地址
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.dataForm.address = res.name;
					},
				})
			},
			addContact() {
				uni.navigateTo({
					url: '/pages/releases/addShopContact/addShopContact'
				})
			},
			deleteContact(index) {
				this.dataForm.contacts.splice(index, 1)
			},
			openChange(row, index) {
				row.open = index
			},
			openPick(filed, key) {
				key ? this.pickKey = key : null;
				this.pickFiled = filed;
				this.pickData = [];
				this.pickDefaultIndex = this.pickChooseD[this.pickFiled] ? this.pickChooseD[this.pickFiled] : [0];
				if (filed == 'buildingType') {
					this.pickData = [this.buildingTypeDic];
				} else if (filed == 'parkingSpace') {
					this.pickData = [this.parkingSpaceDic]
				}
				console.log(this.pickData)
				this.pickShow = true;

			},
			pickChoose(data) {
				this.pickChooseD[this.pickFiled] = data?.indexs;
				this.dataForm[this.pickFiled] = data?.value[0].id;
				this.pickShow = false;
			},
			chooseName(dic, val) {
				return dic?.filter(item => item.id == val)[0]?.name;
			},
			//获取户型字典
			async getHouseTypeDic() {
				let res = await dictionary({
					gids: '31,32'
				})
				console.log(res)
				this.buildingTypeDic = res.data['31'];
				this.parkingSpaceDic = res.data['32'];
			},
			/**
			 * 非空字段验证
			 * @param {Object} data 验证的对象数据 
			 * @param {Array} rule 自定义验证规则 
			 * rule:{
			 *  filed 字段名
			 *  isRequire 是否必填
			 *} 
			 */
			customValidation(data, rule) {
				console.log(data)
				if (!rule) {
					return false;
				}
				for (let i = 0; i < rule.length; i++) {
					let k = rule[i].filed
					let kType = typeof data[k];
					if (kType === 'string' && (!data[k])) {
						this.$util.Tips({
							title: rule[i].tip
						})
						return false;
					} else if (kType === 'number') {

						//包含0 
						if (!(rule[i].isZero)) {
							if ((data[k] === 0) && (!data[k])) {
								this.$util.Tips({
									title: rule[i].tip
								})
								return false;
							}
						} else {
							if (!data[k]) {
								this.$util.Tips({
									title: rule[i].tip
								})
								return false;
							}
						}
					} else if (kType == 'object') {
						if (data[k] && Object.keys(data[k]).length <= 0) {
							this.$util.Tips({
								title: rule[i].tip
							})
							return false;
						}
					}
				}
				return true;
			},
			//添加项目
			async addProjectMeth() {
				let validate = this.customValidation(this.dataForm, this.requireFiledRule)
				if (validate) {
					console.log(this.dataForm)
					// this.uploadFilesData.forEach(item=>{
					// 	this.dataForm.projectFile = 
					// })
					if(!this.dataForm.name){
						this.dataForm.name = this.dataForm.projectId;
					}
					this.dataForm.projectFile = this.uploadFilesData.map(item => item.projectFile).join(',');
					this.dataForm.fileName = this.uploadFilesData.map(item => item.fileName).join(',');
					let submitData = JSON.parse(JSON.stringify(this.dataForm));
					submitData['photoVideo'] = submitData['photoVideo']?.join(',')
					// console.log(submitData)
					// addProject(submitData).then(res=>{
					// 	const eventChannel = this.getOpenerEventChannel();
					// 	eventChannel.emit('upList');
					// 	uni.navigateBack(-1);
					// }).catch(err=>{
					// 	console.log('err',err)
					// })

					let result = null;
					if (this.isDetail) {
						result = await editProject(submitData)
					} else {
						result = await addProject(submitData);
					}
					console.log('result', result)
					if (result.code == 200) {
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit('upList');
						uni.navigateBack(-1);
					}
				}
			},
			//获项目详情
			getPropertyDetail(id) {
				console.log(id)
				getProjectDetail(id).then(res => {
					console.log(res.data)
					let {
						data
					} = res;
					data.projectId = data.id;
					data.projectName = data.name;
					data.photoVideo = data.photoVideo.split(",")
					if(data.projectFile){
						let pf = data.projectFile.split(',');
						let pn = data.fileName.split(',');
						pf.forEach((p,index)=>{
							this.uploadFilesData.push({
								projectFile: p,
								fileName: pn[index]
							})
						})
					}
					if(data.contacts){
						data.contacts = data.contacts.map(con=>{
							return {
								...con,
								username: con.contactName,
								phone: con.contactPhone
							}
						}) 
					}
					console.log("this.uploadFilesData",this.uploadFilesData)
					this.dataForm = data;
				})
			}
		},
		onLoad(props) {
			if (props.id) {
				this.isDetail = true;
				this.getPropertyDetail(props.id);
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.list .item-r {
		width: calc(100% - 180rpx);
	}

	.list .item .small-ipt {
		// width: calc(100% - 140rpx);
		width: 60%;

	}

	.list .item .small-ipt input {
		display: block;
		width: 130rpx;
		text-align: right;
	}

	.upload-top {
		.upload-btn {
			width: 156rpx;
			height: 48rpx;
			opacity: 1;
			border-radius: 6rpx;
			border: 1px solid rgba(220, 220, 220, 1);
			font-size: 28rpx;
			font-weight: 400;
			line-height: 48rpx;
			color: rgba(0, 0, 0, 0.9);
			text-align: center;
		}

		.upload-mask {
			font-size: 24rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(0, 0, 0, 0.4);
			padding: 0 12rpx;
		}
	}

	.file-table {
		margin-top: 30rpx;

		.table-h {
			border: 1px solid rgba(220, 220, 220, 1);

			.table-l {
				border-right: 1px solid rgba(220, 220, 220, 1);
			}
		}

		.table-l {
			width: 70%;
			line-height: 42rpx;
			padding: 12rpx;
		}

		.table-r {
			width: 30%;
			line-height: 42rpx;
			text-align: center;
		}

		.table-b {
			width: 100%;
			height: 360rpx;
			overflow-y: scroll;
			border: 1px dashed rgba(220, 220, 220, 1);
			border-top: transparent;

			.table-item {
				border-top: 1px solid rgba(220, 220, 220, 1);
			}
		}

	}

	.control-btns {
		padding: 30rpx 0 0;

		.cancel {
			width: 82rpx;
			height: 48rpx;
			opacity: 1;
			border-radius: 6rpx;
			background: rgba(231, 231, 231, 1);
			text-align: center;
			line-height: 48rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);
			margin-right: 12rpx;
		}

		.start-btn {
			width: 120rpx;
			height: 48rpx;
			opacity: 1;
			border-radius: 6rpx;
			background: rgba(212, 227, 252, 1);
			text-align: center;
			line-height: 48rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.9);
		}

		.start-btn-on {
			background: rgba(175, 205, 255, 1.0);
			color: rgba(255, 255, 255, 1);
		}
	}
</style>